import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
  DownloadOutlined,
} from '@ant-design/icons';
import {
  Modal,
  Row,
  Col,
  Card,
  Select,
  Button,
  DatePicker,
  Input,
  Tabs,
  Divider,
  Dropdown,
  Menu,
  message,
  Tooltip,
  Form,
} from 'antd';
import moment from 'moment';
import router from 'umi/router';
import queryString from 'query-string';
import Authorized from '@/utils/Authorized';
import styles from '@/utils/utils.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import downloadFile, { getProPagination } from '@/utils/utils';
import { checkPermissions } from '@/utils/authority';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProModal from '@/pages/components/Problem/ProblemPage/ProModal';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import Area from '../../components/Area';
import ServiceRemark from '../../components/ServiceRemark';
import proIcon from '../../../assets/proIcon.png';
import Customer from '../../components/Customer';
import SearchAccoListOs from '../../components/SearchAccoListOs';
import SearchPersonEs from '../../components/SearchPersonEs';
import DeclareModal from '../../components/DeclareModal';
import BatchTaskProgress from '../../components/BatchTaskProgress';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TabPane } = Tabs;
const { confirm } = Modal;
@connect(({ adjust, loading, publicdata, login, adjustsocialbatch }) => ({
  adjust,
  loading: loading.models.adjust,
  publicdata,
  login,
  adjustsocialbatch,
}))
class Adjust extends PureComponent {
  formRef = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      selectedRows: [],
      visHdlRemark: false,
      busiId: '',
      proVisible: false, // 问题人员
      accoOwnerFlag: false,
      decExcelVisible: false,
      declareData: {},
    };
    this.tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount() {
    const {
      location,
      dispatch,
      adjust: {
        data: { pagination },
        activeKey,
      },
      login: { baseUser },
    } = this.props;
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'adjust/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    const proPagination = getProPagination(tempActiveKey, '5', pagination);
    this.getList(tempActiveKey, proPagination.current, proPagination.pageSize);
    this.getAdjustType();
    this.setState({ accoOwnerFlag: baseUser.postType === 2 });
  }

  getList = async (activeKey = '1', currentPage = 1, pageSize = 10, queryParam, isClear = true) => {
    try {
      const { dispatch } = this.props;
      if (isClear) {
        this.setState({
          selectedRowKeys: [],
          selectedRows: [],
        });
      }
      const fieldsValue = await this.formRef.current.validateFields();
      let tempFieldsValue = fieldsValue;
      tempFieldsValue = queryParam || tempFieldsValue;
      dispatch({
        type: 'adjust/updateModelData',
        payload: { formFieldsValue: tempFieldsValue, activeKey },
      });
      const formFieldsValue = {};
      Object.keys(tempFieldsValue).forEach(key => {
        if (key === 'creTime') {
          formFieldsValue.startDateYm =
            (tempFieldsValue.creTime &&
              tempFieldsValue.creTime[0] &&
              tempFieldsValue.creTime[0].format('YYYYMM')) ||
            null;
          formFieldsValue.endDateYm =
            (tempFieldsValue.creTime &&
              tempFieldsValue.creTime[1] &&
              tempFieldsValue.creTime[1].format('YYYYMM')) ||
            null;
        } else if (key === 'operTime') {
          formFieldsValue.operStartTime =
            tempFieldsValue.operTime &&
            tempFieldsValue.operTime[0] &&
            tempFieldsValue.operTime[0].valueOf();

          formFieldsValue.operEndTime =
            tempFieldsValue.operTime &&
            tempFieldsValue.operTime[1] &&
            tempFieldsValue.operTime[1].valueOf();
        } else if (tempFieldsValue[key] && tempFieldsValue[key].key) {
          formFieldsValue[key] =
            tempFieldsValue[key].key === undefined || tempFieldsValue[key].key === null
              ? null
              : tempFieldsValue[key].key;
        } else {
          formFieldsValue[key] =
            tempFieldsValue[key] === undefined || tempFieldsValue[key] === null
              ? null
              : tempFieldsValue[key].trim();
        }
        delete formFieldsValue.creTime;
        delete formFieldsValue.operTime;
      });
      const insSerHdlVo = { adjStep: activeKey, ...formFieldsValue };
      const pagerArg = { currentPage, pageSize };
      if (Number(activeKey) === 5) {
        const params = {
          ...formFieldsValue,
          busiType: 3,
        };
        setTimeout(() => {
          const { proTable } = this.state;
          const proFormFieldsValue = { ...params };
          dispatch({
            type: 'adjust/updateModelData',
            payload: {
              proFormFieldsValue,
            },
          });
          if (proTable.searchList) {
            proTable.searchList(proFormFieldsValue, currentPage, pageSize);
          }
        });
      } else {
        dispatch({
          type: 'adjust/fetchList',
          payload: {
            ...insSerHdlVo,
            pagerArg,
          },
        });
      }
    } catch (e) {
      console.error(e);
    }
  };

  renderForm = () => {
    const {
      adjust: { expandForm },
    } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  };

  // 获得调整类型
  getAdjustType = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'adjust/getAdjustType',
      payload: ['INS_ADJ_TYPE'],
    });
  };

  onTimeChanges = value => {
    this.formRef.current.setFieldsValue({
      creTime: value,
    });
  };

  // 重置
  resetSearch = async () => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'adjust/updateModelData',
      payload: { formFieldsValue: {} },
    });
    this.formRef.current.resetFields();
    this.formRef.current.setFieldsValue({ operTime: null, creTime: null });
  };

  // 切换展开收起
  toggleForm = () => {
    const {
      adjust: { expandForm },
      dispatch,
    } = this.props;
    dispatch({
      type: 'adjust/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 批量修改
  batchModify = () => {
    router.push('/socialinsurancemanagement/adjust/batchModify');
  };

  batchFeedback = () => {
    router.push('/socialinsurancemanagement/adjust/batchFeedback?busiType=3');
  };

  // 展开之后的表单项
  renderAdvancedForm = () => {
    const {
      adjust: { serviceDictList, activeKey, formFieldsValue },
    } = this.props;
    const { accoOwnerFlag } = this.state;
    return (
      <Form layout="inline" ref={this.formRef} initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" name="custId" {...this.tableSearchLayout}>
              <Customer attr />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地" name="areaId" {...this.tableSearchLayout}>
              <Area labelInValue />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="所属客服" name="creId" {...this.tableSearchLayout}>
              <SearchPersonEs
                allowClear
                showSearch
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="调整类型" name="adjType" {...this.tableSearchLayout}>
              <Select
                placeholder="请选择"
                style={{ width: '100%' }}
                allowClear
                optionFilterProp="children"
                showSearch
              >
                {serviceDictList.map(item => (
                  <Option key={item.itemCode}>{item.itemName}</Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="姓名" name="empName" {...this.tableSearchLayout}>
              <Input placeholder="请输入姓名" maxLength={15} />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="证件号" name="certNo" {...this.tableSearchLayout}>
              <Input placeholder="请输入证件号" maxLength={18} />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="生效日期" name="creTime" {...this.tableSearchLayout}>
              <RangePicker
                style={{ width: '100%' }}
                mode={['month', 'month']}
                format="YYYY-MM-01"
                onPanelChange={this.onTimeChanges}
              />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="操作时间" name="operTime" {...this.tableSearchLayout}>
              <RangePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          {accoOwnerFlag && (
            <Col md={8} sm={24}>
              <FormItem label="账户负责人" name="accoRespId" {...this.tableSearchLayout}>
                <SearchAccoListOs
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                />
              </FormItem>
            </Col>
          )}
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={8} sm={24} />
            <Col md={8} sm={24} />
            <Col md={8} sm={24} offset={!accoOwnerFlag ? 16 : 0}>
              <div style={{ overflow: 'hidden' }}>
                <div style={{ float: 'right', marginBottom: 24 }}>
                  <Button type="primary" htmlType="submit" onClick={() => this.getList(activeKey)}>
                    查询
                  </Button>
                  <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                    重置
                  </Button>
                  <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                    收起 <UpOutlined />
                  </a>
                </div>
              </div>
            </Col>
          </Row>
        </Row>
      </Form>
    );
  };

  // 展开之前的表单项
  renderSimpleForm = () => {
    const {
      adjust: { activeKey, formFieldsValue },
    } = this.props;
    return (
      <Form layout="inline" ref={this.formRef} initialValues={formFieldsValue}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="客户名称" name="custId" {...this.tableSearchLayout}>
              <Customer attr />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="执行地" name="areaId" {...this.tableSearchLayout}>
              <Area labelInValue />
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" onClick={() => this.getList(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  };

  // 点击线下申报
  underLineDeclare = () => {
    const {
      adjust: { activeKey },
      dispatch,
    } = this.props;

    const { selectedRowKeys, selectedRows } = this.state;
    let content = '';
    if (!selectedRowKeys.length) {
      content = '是否对当前列表全部数据进行申报？';
    } else {
      content = (
        <div>
          是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
          条数据进行线下申报？
        </div>
      );
    }
    confirm({
      title: content,
      okText: '是',
      cancelText: '否',
      icon: <QuestionCircleOutlined />,
      onOk: async () => {
        try {
          const tempFieldsValue = await this.formRef.current.validateFields();
          const formFieldsValue = {};
          Object.keys(tempFieldsValue).forEach(key => {
            if (key === 'creTime') {
              formFieldsValue.startDateYm =
                (tempFieldsValue.creTime &&
                  tempFieldsValue.creTime[0] &&
                  tempFieldsValue.creTime[0].format('YYYYMM')) ||
                null;
              formFieldsValue.endDateYm =
                (tempFieldsValue.creTime &&
                  tempFieldsValue.creTime[1] &&
                  tempFieldsValue.creTime[1].format('YYYYMM')) ||
                null;
            } else if (key === 'operTime') {
              formFieldsValue.operStartTime =
                tempFieldsValue.operTime &&
                tempFieldsValue.operTime[0] &&
                tempFieldsValue.operTime[0].valueOf();

              formFieldsValue.operEndTime =
                tempFieldsValue.operTime &&
                tempFieldsValue.operTime[1] &&
                tempFieldsValue.operTime[1].valueOf();
            } else {
              formFieldsValue[key] =
                tempFieldsValue[key] === undefined || tempFieldsValue[key] === null
                  ? null
                  : tempFieldsValue[key].trim();
            }
            delete formFieldsValue.creTime;
            delete formFieldsValue.operTime;
          });

          let payload = {};
          if (!selectedRowKeys.length) {
            payload = {
              entryAdjQueryDto: { ...formFieldsValue, adjStep: activeKey },
              insEntryAdjs: [],
            };
          } else {
            payload = {
              insEntryAdjs: selectedRows.map(item => ({
                execAdjId: item.execAdjId,
                vno: item.vno,
              })),
            };
          }
          const res = await dispatch({
            type: 'adjust/underLineDeclare',
            payload,
          });
          if (res.success) {
            if (res.data) {
              // 渲染Alert提示信息
              this.renderAlertInfo(res.data);
            } else {
              this.getList(activeKey, undefined, undefined, undefined, true);
            }
          }
        } catch (e) {
          console.error(e);
        }
      },
    });
  };

  // 渲染Alert提示信息
  renderAlertInfo = obj => {
    Modal.warning({
      title: (
        <p>
          成功<span style={{ color: '#faad14' }}>{obj.succCount}</span>
          条，失败
          <span style={{ color: '#faad14' }}>{obj.errCount}</span>条
        </p>
      ),
      content:
        (obj.errMsgs && obj.errMsgs.length && (
          <div>
            <h4>失败原因：</h4>
            {obj.errMsgs.map((item, index) => (
              <p>{`${index + 1}.${item}`}</p>
            ))}
          </div>
        )) ||
        null,
      okText: '确定',
      onOk: async () => {
        try {
          const {
            adjust: { activeKey },
          } = this.props;
          this.getList(activeKey, undefined, undefined, undefined, true);
        } catch (e) {
          console.error(e);
        }
      },
    });
  };

  // tab项切换时候
  tabChage = activeKey => {
    const {
      location: { pathname },
      dispatch,
    } = this.props;
    const temUrl = pathname.split('/index')[0];
    router.push({
      pathname: `${temUrl}/index`,
      query: { activeKey },
    });
    dispatch({
      type: 'adjust/updateModelData',
      payload: {
        activeKey,
      },
    });
    this.setState({ selectedRows: [], selectedRowKeys: [] }, () => {
      this.getList(activeKey);
    });
  };

  // 点击显示办理备注弹框
  hdlRemark = record => {
    const { dispatch } = this.props;
    this.setState({
      sendId: record.sendId,
      taskId: record.adjId,
      busiId: record.execAdjId,
    });
    dispatch({
      type: 'adjust/detailHdlRemark',
      payload: { sendId: record.sendId, busiId: record.insEmpOrdId },
    });
    this.handleModalVisible(true);
  };

  // 选中表格中一行时候
  handleSelectRows = (selectedRows, selectedKeys) => {
    this.setState({ selectedRows, selectedRowKeys: selectedKeys });
  };

  handleStandardTableChange = pagination => {
    const {
      adjust: { activeKey },
    } = this.props;
    this.getList(activeKey, pagination.current, pagination.pageSize, undefined, false);
  };

  // 标记申报成功
  declareMark = () => {
    const {
      dispatch,
      adjust: { activeKey },
    } = this.props;
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      Modal.confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
            条数据标记申报成功？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: async () => {
          try {
            const insEntryAdjs = selectedRows.map(item => ({
              execAdjId: item.execAdjId,
              vno: item.vno,
            }));
            const res = await dispatch({
              type: 'adjust/fetchDeclareMark',
              payload: { insEntryAdjs },
            });
            if (res.success) {
              if (res.data) {
                // 渲染Alert提示信息
                this.renderAlertInfo(res.data);
              } else {
                this.getList(activeKey, undefined, undefined, undefined, true);
              }
            }
          } catch (e) {
            console.error(e);
          }
        },
      });
    } else {
      message.warning('请选择至少一条记录');
    }
  };

  // 导入申报成功
  declareImport = () => {
    router.push('/socialinsurancemanagement/adjust/batch');
  };

  // 取消申报
  cancelDeclare = () => {
    const {
      dispatch,
      adjust: { activeKey },
    } = this.props;
    const { selectedRows } = this.state;
    if (selectedRows.length) {
      confirm({
        title: (
          <div>
            是否对当前列表<span className="emphasize-text">{selectedRows.length}</span>
            条数据进行取消申报？
          </div>
        ),
        icon: <QuestionCircleOutlined />,
        okText: '是',
        cancelText: '否',
        onOk: async () => {
          try {
            const insEntryAdjs = selectedRows.map(item => ({
              execAdjId: item.execAdjId,
              vno: item.vno,
            }));
            const res = await dispatch({
              type: 'adjust/fetchCancelDeclare',
              payload: { insEntryAdjs },
            });
            if (res.success) {
              if (res.data) {
                // 渲染Alert提示信息
                this.renderAlertInfo(res.data);
              } else {
                this.getList(activeKey, undefined, undefined, undefined, true);
              }
            }
          } catch (e) {
            console.error(e);
          }
        },
      });
    } else {
      message.warning('请选择至少一条记录');
    }
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  // 提交办理备注数据
  submitData = values => {
    const {
      dispatch,
      adjust: {
        activeKey,
        data: { pagination },
      },
    } = this.props;
    const { taskId, sendId, busiId } = this.state;

    dispatch({
      type: 'adjust/remarkOk',
      payload: {
        ...values,
        taskId,
        sendId,
        busiId,
      },
    }).then(res => {
      if (res) {
        message.success('办理备注成功');
        this.getList(activeKey, pagination.current, pagination.pageSize);
        this.handleModalVisible();
      }
    });
  };

  // 标记问题人员弹框
  taggingProblem = flag => {
    const { selectedRows, selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) return message.warning('请至少选择一项');
    const temArr = selectedRows.filter(item => Number(item.probFlag) === 1);
    if (temArr.length) {
      return message.error('问题人员无法做相关操作');
    }
    this.setState({
      proVisible: flag,
    });
  };

  // 标记问题人员
  proHandleOk = () => {
    const {
      adjust: {
        activeKey,
        data: { pagination },
      },
    } = this.props;
    this.taggingProblem(false);
    this.getList(activeKey, pagination.current, pagination.pageSize);
  };

  // 申报表导出
  exportExcel = () => {
    const {
      adjust: { activeKey },
    } = this.props;
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length) {
      this.downloadFile(
        { execAdjIds: selectedRowKeys, adjStep: activeKey },
        '/osApi/insEntryAdj/exportInsAdj',
        'POST'
      );
    } else {
      Modal.confirm({
        title: `如果不选择数据，则默认导出当前列表下所有数据`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.downExcel();
        },
      });
    }
  };

  // 导出excel
  exportData = () => {
    const {
      adjust: { activeKey },
    } = this.props;
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length) {
      downloadFile(
        { execAdjIds: selectedRowKeys, adjStep: activeKey },
        '/osApi/insEntryAdj/expInsEntAdj',
        'POST'
      );
    } else {
      Modal.confirm({
        title: `如果不选择数据，则默认导出当前列表下所有数据`,
        icon: <QuestionCircleOutlined />,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.downExcel();
        },
      });
    }
  };

  // 进度弹框显隐
  handleProgressModalVisible = flag => {
    const {
      activeKey,
      pageData: { pagination },
      formFieldsValue,
      dispatch,
    } = this.props;
    if (!flag) {
      dispatch({
        type: 'addsocialbatch/updateModelData',
        payload: {
          showProgress: false,
        },
      });
      this.searchList(
        this.processFormData(formFieldsValue),
        activeKey,
        pagination.current,
        pagination.pageSize
      );
    }
  };

  onDeclareCancel = () => {
    this.setState({
      decExcelVisible: false,
    });
  };

  // 问题人员导出
  exportProExcel = () => {
    const {
      adjust: { formFieldsValue },
    } = this.props;
    const { selectedRowKeys } = this.state;
    const obj = {
      ...formFieldsValue,
      busiType: 3,
      detIds: selectedRowKeys,
    };
    if (selectedRowKeys.length) {
      downloadFile(obj, '/osApi/problem/ins/export', 'POST', () => {});
    } else {
      confirm({
        title: '请选择数据，如不选择，默认导出当前条件下所有数据！',
        icon: <QuestionCircleOutlined />,
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          downloadFile(obj, '/osApi/problem/ins/export', 'POST');
        },
      });
    }
  };

  // 下载申报表
  downExcel = async () => {
    try {
      const {
        adjust: { data, activeKey },
        publicdata: { proListData },
      } = this.props;
      const proTotal = proListData.pagination.total;
      const {
        pagination: { total },
      } = data;
      const tempFieldsValues = await this.formRef.current.validateFields();
      Object.keys(tempFieldsValues).forEach(key => {
        if (tempFieldsValues[key] === undefined) {
          tempFieldsValues[key] = null;
        } else if (key === 'creTime') {
          tempFieldsValues.startDateYm = tempFieldsValues.creTime[0].format('YYYYMM') || null;
          tempFieldsValues.endDateYm = tempFieldsValues.creTime[1].format('YYYYMM') || null;
          delete tempFieldsValues[key];
        } else if (key === 'operTime') {
          tempFieldsValues.operStartTime = tempFieldsValues.operTime[0].valueOf();
          tempFieldsValues.operEndTime = tempFieldsValues.operTime[1].valueOf();
          delete tempFieldsValues[key];
        }
      });
      tempFieldsValues.adjStep = Number(activeKey) === 5 ? undefined : activeKey;
      if (Number(activeKey) === 5) {
        if (Number(proTotal) === 0) {
          message.warning('无查询结果，不可导出');
        } else {
          this.downloadFile(
            { ...tempFieldsValues, busiType: 3 },
            '/osApi/problem/ins/export',
            'POST'
          );
        }
      } else if (Number(total) === 0) {
        message.warning('无查询结果，不可导出');
      } else if (Number(activeKey) === 1 || Number(activeKey) === 2 || Number(activeKey) === 3) {
        this.downloadFile({ ...tempFieldsValues }, '/osApi/insEntryAdj/expInsEntAdj', 'POST');
      } else {
        this.downloadFile({ ...tempFieldsValues }, '/osApi/insEntryAdj/exportInsAdj', 'POST');
      }
    } catch (e) {
      console.error(e);
    }
  };

  render() {
    const {
      adjust: { tabList, data, detailHdl, activeKey, proFormFieldsValue },
      loading,
      location,
      adjustsocialbatch,
    } = this.props;
    const {
      selectedRowKeys,
      proVisible,
      selectedRows,
      visHdlRemark,
      decExcelVisible,
      declareData,
    } = this.state;
    const { pathname } = location;
    const tempUrl = pathname.split('/index')[0];

    const columnsDeal = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '调整范围',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '生效日期',
        dataIndex: 'validDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (text && `${`${text}`.substr(0, 4)}-${`${text}`.substr(4)}-01`) || '--',
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 140, textAlign: 'center' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          // 除运行之外
          <span>
            {/* 运行 */}
            <Authorized authority="os:insEntryAdj:insEntAdjInfo">
              <span
                style={{ color: '#1890FF', cursor: 'pointer' }}
                onClick={() => {
                  router.push(
                    `/socialinsurancemanagement/adjust/detail?execAdjId=${
                      record.execAdjId
                    }&activeKey=${activeKey}`
                  );
                }}
              >
                查看
                <Divider type="vertical" />
              </span>
            </Authorized>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.hdlRemark(record)}
            >
              办理备注
            </span>
          </span>
        ),
      },
    ];
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '调整范围',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '生效日期',
        dataIndex: 'validDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: text => (text && `${`${text}`.substr(0, 4)}-${`${text}`.substr(4)}-01`) || '--',
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 140, textAlign: 'center' } }),
        render: (text, record) => (
          // 除运行之外
          <span>
            {/* 运行 */}
            <Authorized authority="os:insEntryAdj:insEntAdjInfo">
              <span
                style={{ color: '#1890FF', cursor: 'pointer' }}
                onClick={() => {
                  router.push(
                    `/socialinsurancemanagement/adjust/detail?execAdjId=${
                      record.execAdjId
                    }&activeKey=${activeKey}`
                  );
                }}
              >
                查看
                <Divider type="vertical" />
              </span>
            </Authorized>
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => this.hdlRemark(record)}
            >
              {' '}
              办理备注
            </span>
          </span>
        ),
      },
    ];
    const columnsCancel = [
      {
        title: '姓名',
        dataIndex: 'empName',
        render: (text, record) =>
          Number(record.probFlag) === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} alt="" />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
      },
      {
        title: '执行地区',
        dataIndex: 'areaName',
      },
      {
        title: '调整范围',
        dataIndex: 'adjTypeName',
      },
      {
        title: '生效日期',
        dataIndex: 'validDate',
        render: text => (text && `${`${text}`.substr(0, 4)}-${`${text}`.substr(4)}-01`) || '--',
      },
      {
        title: '所属客服',
        dataIndex: 'creName',
      },
      {
        title: '操作时间',
        dataIndex: 'operTime',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => (text ? moment(text).format('YYYY-MM-DD HH:mm') : '--'),
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { width: 140, textAlign: 'center', fontWeight: 'bold' } }),
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        render: (text, record) => (
          // 除运行之外
          <span>
            {/* 运行 */}
            <span
              style={{ color: '#1890FF', cursor: 'pointer' }}
              onClick={() => {
                router.push(
                  `/socialinsurancemanagement/adjust/detail?execAdjId=${
                    record.execAdjId
                  }&activeKey=${activeKey}`
                );
              }}
            >
              {' '}
              查看
              <Divider type="vertical" />
            </span>
          </span>
        ),
      },
    ];
    const declareMenu = (
      <Menu>
        <Menu.Item>
          <Authorized authority="os:insEntryAdj:insEntryAdjImport">
            <a onClick={this.declareImport}>申报结果导入</a>
          </Authorized>
        </Menu.Item>
        <Menu.Item>
          <Authorized authority="os:insEntryAdj:completeDecl">
            <a onClick={this.declareMark}>标记申报成功</a>
          </Authorized>
        </Menu.Item>
      </Menu>
    );
    const delMore = (
      <Menu>
        {checkPermissions('os:insEntryAdj:impUpdInsEntAdj') && (
          <Menu.Item>
            <span onClick={this.batchModify}>批量修改</span>
          </Menu.Item>
        )}
        <Menu.Item onClick={this.exportData}>
          <span>导出</span>
        </Menu.Item>
      </Menu>
    );

    const more = (
      <Menu>
        {checkPermissions('os:insEntryAdj:cancelDecl') && (
          <Menu.Item>
            <a onClick={this.cancelDeclare}>取消申报</a>
          </Menu.Item>
        )}
        {checkPermissions('os:insEntryAdj:exportInsAdj') && (
          <Menu.Item>
            <a onClick={this.exportExcel}>申报明细表导出</a>
          </Menu.Item>
        )}
        {checkPermissions('os:insEntryAdj:impUpdInsEntAdj') && (
          <Menu.Item>
            <a onClick={this.batchModify}>批量修改</a>
          </Menu.Item>
        )}
        <Menu.Item>
          <a onClick={this.exportData}>导出</a>
        </Menu.Item>
      </Menu>
    );
    const tabPane1 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="os:insEntryAdj:underLineDecl">
            <Button type="primary" style={{ marginRight: 8 }} onClick={this.underLineDeclare}>
              线下申报
            </Button>
          </Authorized>
          <Authorized authority="os:insAdjProb:addProb">
            <Button style={{ marginRight: 8 }} onClick={() => this.taggingProblem(true)}>
              标记问题人员
            </Button>
          </Authorized>
          <Dropdown overlay={delMore}>
            <Button>
              更多 <DownOutlined />
            </Button>
          </Dropdown>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={data}
          columns={columns}
          rowKey="execAdjId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane2 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Dropdown overlay={declareMenu}>
            <Button type="primary" style={{ marginRight: 8 }}>
              申报完成
            </Button>
          </Dropdown>
          <Authorized authority="os:insAdjProb:addProb">
            <Button style={{ marginRight: 8 }} onClick={this.taggingProblem}>
              标记问题人员
            </Button>
          </Authorized>
          <Dropdown overlay={more}>
            <Button>
              更多 <DownOutlined />
            </Button>
          </Dropdown>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={data}
          columns={columnsDeal}
          rowKey="execAdjId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane3 = (
      <div>
        <Row style={{ marginBottom: 16 }}>
          <Authorized authority="">
            <Button
              type="primary"
              style={{ marginRight: 8 }}
              onClick={this.exportData}
              icon={<DownloadOutlined />}
            >
              导出
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={data}
          columns={columnsDeal}
          rowKey="execAdjId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane4 = (
      <div>
        <div>
          <Row style={{ marginBottom: 16 }}>
            <Authorized authority="os:insAdjProb:addProbFdbk" noMatch={null}>
              <Button type="primary" onClick={this.batchFeedback} style={{ marginRight: 8 }}>
                批量反馈
              </Button>
            </Authorized>
            {/* <Authorized authority="os:accuAddDet:exportAccuAdd" noMatch={null}> */}
            <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={proFormFieldsValue} />
            {/* </Authorized> */}
          </Row>
        </div>
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl={`${tempUrl}/problem`}
          busiType="3"
        />
      </div>
    );
    const tabPane5 = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          loading={loading}
          selectedRowKeys={selectedRowKeys}
          data={data}
          columns={columnsCancel}
          rowKey="execAdjId"
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPaneTem = ['', tabPane1, tabPane2, tabPane3, tabPane5, tabPane4];
    return (
      <PageHeaderWrapper>
        {/* 最上方表单区域 */}
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        {this.selectedRowKeys}
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.tabChage}>
              {tabList.map(pane => (
                <TabPane tab={pane.itemName} key={pane.itemCode}>
                  {tabPaneTem[pane.itemCode]}
                </TabPane>
              ))}
            </Tabs>
          </div>
        </Card>
        <DeclareModal
          visible={decExcelVisible}
          dataSource={declareData}
          onCancel={this.onDeclareCancel}
          onOk={this.onDeclareCancel}
        />
        <ServiceRemark
          visHdlRemark={visHdlRemark}
          handleModalVisible={this.handleModalVisible}
          submitData={this.submitData}
          detailHdl={detailHdl}
        />
        {/* <ProModal
          visible={proVisible}
          selectedRows={selectedRows}
          onOk={this.proHandleOk}
          onCancel={() => this.taggingProblem(false)}
          isObj={false}
          confirmLoading={confirmLoading}
        /> */}
        {proVisible && (
          <ProModal
            selectedRows={selectedRows}
            selectedRowKeys={selectedRowKeys}
            busiType="3"
            onOk={this.proHandleOk}
            onCancel={() => this.taggingProblem(false)}
            isProType
          />
        )}
        <BatchTaskProgress
          progressVisible={adjustsocialbatch.showProgress}
          progressPercent={adjustsocialbatch.progressPercent || 0}
          isShowResult={adjustsocialbatch.progressPercent === 100}
          resultInfo={adjustsocialbatch.resultInfo}
          handleProgressModalVisible={this.handleProgressModalVisible}
          maskClosable={false}
        />
      </PageHeaderWrapper>
    );
  }
}

export default Adjust;
